<template>
    <a-card :bordered="false">
        <a-row>
            <a-col :span="3" style="height:90vh;overflow: auto;">
                <div>
                    <div class="componentHeader">布局容器</div>
                    <draggable :list="layoutList" :sort="false"
                        :group="{ name: 'componentLibraryGroup', pull: 'clone', put: false }" 
                        :animation="150"
                        :clone="onClone" 
                        :move="onMove" >
                        <div v-for="(item, index) in layoutList" :key="index" class="component">
                            <span :class="item.class"  style=" font-size:30px; "></span><br/>{{item.label}}
                        </div>
                    </draggable>
               </div>
          
                <div style="clear:both"></div>
                <div style="margin-top:20px">
                    <div class="componentHeader">组件</div>
                    <draggable :list="componentList" :sort="false" 
                        :animation="150" 
                        :group="{ name: 'componentLibraryGroup', pull: 'clone', put: false }"
                        :clone="onClone" 
                        :move="onMove">
                        <div v-for="(item, index) in componentList" :key="index" class="component">
                            <span :class="item.class"  style=" font-size:30px; "></span><br/>{{item.label}}
                        </div>

                    </draggable>
               </div>

               <div style="clear:both"></div>
                <div style="margin-top:20px">
                    <div class="componentHeader">联合组件</div>
                    <draggable :list="combineComponentList" :sort="false" 
                        :animation="150" 
                        :group="{ name: 'componentLibraryGroup', pull: 'clone', put: false }"
                        :clone="onClone" 
                        :move="onMove">
                        <div v-for="(item, index) in combineComponentList" :key="index" class="component">
                            <span :class="item.class"  style=" font-size:30px; "></span><br/>{{item.label}}
                        </div>

                    </draggable>
               </div>

               <div style="clear:both"></div>
                <div style="margin-top:20px">
                    <div class="componentHeader">图表组件</div>
                    <draggable :list="charComponentList" :sort="false" 
                        :animation="150" 
                        :group="{ name: 'componentLibraryGroup', pull: 'clone', put: false }"
                        :clone="onClone" 
                        :move="onMove">
                        <div v-for="(item, index) in charComponentList" :key="index" class="component">
                            <span :class="item.class"  style=" font-size:30px; "></span><br/>{{item.label}}
                        </div>

                    </draggable>
               </div>

               <div style="clear:both"></div>
                <div style="margin-top:20px">
                    <div class="componentHeader">工作流</div>
                    <draggable :list="flowComponentList" :sort="false" 
                        :animation="150" 
                        :group="{ name: 'componentLibraryGroup', pull: 'clone', put: false }"
                        :clone="onClone" 
                        :move="onMove">
                        <div v-for="(item, index) in flowComponentList" :key="index" class="component">
                            <span :class="item.class"  style=" font-size:30px; "></span><br/>{{item.label}}
                        </div>

                    </draggable>
               </div>

               
            </a-col>
            <a-col :span="13">
                
                <div class="centerDiv">
                    <pageGenerator :echoData="echoData" @handlerChoose="handlerChoose" @handlerDelete="handlerDelete"></pageGenerator>
                </div>

            </a-col>
            <a-col :span="8">
                <a-tabs  v-model="activeKey">
                    <a-tab-pane key="1" tab="页面属性">
                        <ExtForm entityClassName="com.sdp.right.entity.SysPage" ref="pageForm" :formfields="formfields" :mostColumns="1" @changeEventHandler="changeEventHandler"></ExtForm>
                        <a-page-header title="JSON数据"/>
                        <LAceEditor ref="LAceEditor" :readOnly="false" :content="JSON.stringify(pageData, null, 2)" height="400px" theme="eclipse" lang="json"></LAceEditor>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="组件属性">
                        <ComponentAttribute :component="currentClickComponent"></ComponentAttribute>
                        
                    </a-tab-pane>
                
                </a-tabs>
 
            </a-col>
        </a-row>
   
      
    </a-card>
</template>

<script>

import {SysMixin} from '@/mixins/SysMixin'

import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import draggable from 'vuedraggable'
import pageGenerator from '@/components/lt/codeGenerator/pageGenerator'
import ComponentAttribute from "@/components/lt/codeGenerator/attribute/ComponentAttribute"
import { v4 as uuidv4 } from 'uuid'
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import pick from 'lodash.pick'
import LAceEditor from '@/components/lt/LAceEditor'
import { Modal } from 'ant-design-vue'
import defaultSettings from '@/config/defaultSettings'

export default {
    name:'pageDesign',
    components:{ draggable,pageGenerator,ComponentAttribute,ExtForm,LAceEditor},
    props:{
        SysPage:{
            type:Object,
            default:()=>{},
            required:true
        }
        
    },
    mixins:[SysMixin],
    data(){
        return{
            activeKey:'1',
            topList:[pageSetting.常量.组件.栅格行,pageSetting.常量.组件.div],
            //布局
            layoutList:[
                {
                    type:pageSetting.常量.组件类型.布局,component:pageSetting.常量.组件.栅格行,echoComponent:pageSetting.常量.画布组件.栅格行,label:'栅格行',class:'iconfont icon-liebiaomoshi_kuai',
                    props:{align:'top',justify:'start'},
                    components:[],
                    dragIn:[pageSetting.常量.画布组件.页面,pageSetting.常量.组件.栅格行,pageSetting.常量.组件.栅格列,pageSetting.常量.组件.网格表单]
                },
                {
                    type:pageSetting.常量.组件类型.布局,component:pageSetting.常量.组件.栅格列,echoComponent:pageSetting.常量.画布组件.栅格列,label:'栅格列',class:'iconfont icon-buju-1x3',
                    props:{span:8},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格行]
                },
                 {
                    type:pageSetting.常量.组件类型.布局,component:pageSetting.常量.组件.div,echoComponent:pageSetting.常量.画布组件.div,label:'DIV层',class:'iconfont icon-fangkuang',
                    props:{},
                    components:[],//子组件
                    dragIn:[pageSetting.常量.画布组件.页面,pageSetting.常量.组件.栅格行,pageSetting.常量.组件.栅格列]
                },
               
            ],
           
            //组件
            componentList:[
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.表单,echoComponent:pageSetting.常量.画布组件.表单,label:'表单',class:'iconfont icon-jurassic_form',
                    props:{
                        mostColumns:1,
                        entityClassName:'',
                        formfields:[]
                    },
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div,pageSetting.常量.组件.页签]
                },
                
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.表格,echoComponent:pageSetting.常量.画布组件.表格,label:'表格',class:'iconfont icon-biaoge',
                    props:{columns:[],formAttributes:[],showPagination:true,showQueryForm:true,isAutoLoad:true,showRowIndex:false,entityClassName:''},
                    components:[],
                    scopedSlots:[],
                    action:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div,pageSetting.常量.组件.页签]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.树,echoComponent:pageSetting.常量.画布组件.树,label:'树',class:'iconfont icon-tree',
                    props:{},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div,pageSetting.常量.组件.页签]
                },
                 {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.标签页,echoComponent:pageSetting.常量.画布组件.标签页,label:'tab标签页',class:'iconfont icon-tab-group',
                    props:{},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.查询表单,echoComponent:pageSetting.常量.画布组件.查询表单,label:'查询表单',class:'iconfont icon-chaxun',
                    props:{formAttributes:[]},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div,pageSetting.常量.组件.页签]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.标签,echoComponent:pageSetting.常量.画布组件.标签,label:'标签',class:'iconfont icon-fangkuang',
                    props:{color:'',visible:true,text:''},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.地图,echoComponent:pageSetting.常量.画布组件.地图,label:'地图',class:'iconfont icon-ditu',
                    props:{height:400},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.二维码,echoComponent:pageSetting.常量.画布组件.二维码,label:'二维码',class:'iconfont icon-fangkuang',
                    props:{},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div]
                },
                
            ],
            //联合组件
            combineComponentList:[
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.按钮组,echoComponent:pageSetting.常量.画布组件.按钮组,label:'按钮组',class:'iconfont icon-anniuzu1',
                    props:{},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div,pageSetting.常量.组件.页签]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.按钮,echoComponent:pageSetting.常量.画布组件.按钮,label:'按钮',class:'iconfont icon-anniu',
                    props:{title:'按钮',dropDownButton:false,dropDownMenu:[]},
                    components:[],
                    dragIn:[pageSetting.常量.组件.按钮组]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.网格表单,echoComponent:pageSetting.常量.画布组件.网格表单,label:'网格表单',class:'iconfont icon-jurassic_form',
                    props:{
                        entityClassName:'',
                    },
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div,pageSetting.常量.组件.页签]
                },
                {
                    type:pageSetting.常量.组件类型.布局,component:pageSetting.常量.组件.网格表单栅格列,echoComponent:pageSetting.常量.画布组件.网格表单栅格列,label:'网格表单栅格列',class:'iconfont icon-buju-1x3',
                    props:{
                        span:12,
                        formfields:[],
                    },
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格行]
                },
                
            ],
            //图表组件
            charComponentList:[
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.折线图,echoComponent:pageSetting.常量.画布组件.折线图,label:'折线图',class:'iconfont icon-tubiao-zhexiantu',
                    props:{height:200,xAxisData:'',series:[],option:{
                        title:{
                            show:false,
                            text:'',
                            textStyle:{
                                color:'#333',
                                fontStyle:'normal',
                                fontWeight:'normal',
                                fontSize:18
                            }
                        },
                        legend:{
                            show:true,
                            left:45,
                            top:0,
                            right:0,
                            bottom:0,
                        },
                        tooltip:{
                            show:true,
                            trigger: 'axis',
                            axisPointer:{
                                type: 'shadow',//'line' 折线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。
                            }
                        },
                        grid:{
                            show:false,//是否显示网格
                            borderColor:'#ccc',//网格颜色
                            borderWidth:0,//网格宽度
                            left: "1%",
                            top: "4%",
                            right: "1%",
                            bottom: "3%",
                            containLabel:true,//是否防止标签溢出
                            
                        },
                        xAxis: {
                            type: "category",
                            axisLine: {
                                lineStyle: {color:'#333'}
                            },
                            splitLine: { "show": false},
                            axisTick: {"show": false},
                            splitArea: { "show": false},
                        },
                        yAxis: {
                            type: "value",
                            splitLine: {"show": false},
                            axisLine: {lineStyle: {color: '#333'}},
                            axisTick: {"show": false},
                            splitArea: {"show": false},
                        },
                    }},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.柱状图,echoComponent:pageSetting.常量.画布组件.柱状图,label:'柱状图',class:'iconfont icon-tubiao-zhuzhuangtu',
                    props:{height:200,xAxisData:'',series:[],option:{
                        title:{
                            show:false,
                            text:'',
                            textStyle:{
                                color:'#333',
                                fontStyle:'normal',
                                fontWeight:'normal',
                                fontSize:18
                            }
                        },
                        legend:{
                            show:true,
                            left:45,
                            top:0,
                            right:0,
                            bottom:0,
                        },
                        tooltip:{
                            show:true,
                            trigger: 'axis',
                            axisPointer:{
                                type: 'shadow',//'line' 折线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。
                            }
                        },
                        grid:{
                            show:false,//是否显示网格
                            borderColor:'#ccc',//网格颜色
                            borderWidth:0,//网格宽度
                            left: "1%",
                            top: "4%",
                            right: "1%",
                            bottom: "3%",
                            containLabel:true,//是否防止标签溢出
                            
                        },
                        xAxis: {
                            type: "category",
                            axisLine: {
                                lineStyle: {color:'#333'}
                            },
                            splitLine: { "show": false},
                            axisTick: {"show": false},
                            splitArea: { "show": false},
                        },
                        yAxis: {
                            type: "value",
                            splitLine: {"show": false},
                            axisLine: {lineStyle: {color: '#333'}},
                            axisTick: {"show": false},
                            splitArea: {"show": false},
                        },
                    }},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div]
                },
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.饼状图,echoComponent:pageSetting.常量.画布组件.饼状图,label:'饼状图',class:'iconfont icon-pie',
                    props:{height:200,xAxisData:'',series:[],option:{
                        title:{
                            show:false,
                            text:'',
                            textStyle:{
                                color:'#333',
                                fontStyle:'normal',
                                fontWeight:'normal',
                                fontSize:18
                            }
                        },
                        legend:{
                            show:true,
                            left:0,
                            top:0,
                            right:0,
                            bottom:0,
                            orient:'vertical',
                        },
                        tooltip:{
                            show:true,
                            trigger: 'axis',
                            axisPointer:{
                                type: 'shadow',//'line' 折线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。
                            }
                        },
                        grid:{
                            show:false,//是否显示网格
                            borderColor:'#ccc',//网格颜色
                            borderWidth:0,//网格宽度
                            left: "1%",
                            top: "4%",
                            right: "1%",
                            bottom: "3%",
                            containLabel:true,//是否防止标签溢出
                            
                        },
                        
                    }},
                    components:[],
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div]
                }
            ],
            //工作流
            flowComponentList:[
                {
                    type:pageSetting.常量.组件类型.组件,component:pageSetting.常量.组件.工作流,echoComponent:pageSetting.常量.画布组件.工作流,label:'工作流',class:'iconfont icon-fenzhi',
                    components:[],
                    props:{},
                    dragIn:[pageSetting.常量.组件.栅格列,pageSetting.常量.组件.div]
               }
            ],
            //页面数据树
            echoData:{},
            //画布数据
            pageData:{},
            //当前点击的组件
            currentClickComponent:{},
            formfields:[
                {field:'keyId',label:'页面编码',component:'input',rules: [{ required: false, message: '不能为空!' }],disabled:true},
                {field:'pageName',label:'名称',component:'input',rules: [{ required: true, message: '不能为空!' }]},
                {field:'pageDict',label:'初始化的数据字典',component:pageSetting.常量.表单组件类型.下拉选择,dictCode:defaultSettings.数据字典.数据字典名称,mode:'multiple'},
                
            ],
            isCanSave:false
        
        }
    },
    created(){
       this.echoData=this.SysPage.echoData
       this.pageData = this.SysPage.pageData
    },
    mounted(){
        this.$nextTick(() => {
            this.$refs.pageForm.getForm().setFieldsValue(pick(this.SysPage,'keyId','pageName','pageDict'))
        })
    },
    watch: {
        SysPage: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    this.$refs.LAceEditor.setContent(JSON.stringify(newVal.pageData, null, 2))
                })
                
            },
            immediate: true,
            deep: true
        }
    },

    methods:{
        /**
         * 重写复制方法，深度克隆一个
         * 这里只有move 返回true 才会执行克隆方法
         * 先执行copy
         */
        onClone(origin){
            // console.log(origin)
            let key = new Date().getTime()
            let newData =  _.cloneDeep(origin)
            newData.id=key
            newData['ref']=key
            newData["props"]["componentRef"]=key
            
            //按钮不添加标题
            if(origin["echoComponent"]==pageSetting.常量.画布组件.按钮){
                return newData
            }

            //默认添加一个记录，用来显示标题，也同时为了能让组件拖入，因为如果list为空，是无法拖入的
            if(!newData["components"]){
                newData["components"]=[]
            }
            newData.components.push({
                echoComponent:pageSetting.常量.画布组件.标题,
                component:pageSetting.常量.画布组件.标题,
                label:newData.label,
                parent:newData.component,
                type:pageSetting.常量.画布组件.标题
            })
            
            return newData
        },
    
        //查看页面JSON
        showPreview(){
            this.pageData = this.getPageData(_.cloneDeep(this.echoData))
            this.SysPage.pageData=this.pageData
            this.handleEdit(this.pageData,"pageJson","预览")
        },
   
        onMove(e){
            //   console.log(this.echoData)
            //被拖拽对象
            let draggedElement =e.draggedContext.element
           
            //目标对象
            let relatedElement = {}
            if(e.relatedContext && e.relatedContext.element){
                relatedElement = e.relatedContext.element
            }else{
                relatedElement["parent"]=pageSetting.常量.画布组件.页面
            }
           
            //  console.log("拖拽对象"+JSON.stringify(draggedElement))
            // console.log("目标对象"+JSON.stringify(relatedElement))
            // console.log("拖拽对象能靠近",draggedElement.dragIn)
            // console.log("目标对象",relatedElement["parent"])

            //如果拖动的是顶层组件
            if(this.topList.includes(draggedElement.component)){
                if(relatedElement.parent==pageSetting.常量.画布组件.页面 || this.topList.includes(relatedElement.component)){
                    return true
                }else {
                    if( draggedElement.dragIn.includes(relatedElement["parent"]) ){
                        if(e.draggedContext.futureIndex==0){
                            return false
                        }else {
                            return true
                        }
                    }else{
                        return false
                    }
                }
            }else{
                if( draggedElement.dragIn.includes(relatedElement["parent"]) ){
                    if(e.draggedContext.futureIndex==0){
                        return false
                    }else {
                        return true
                    }
                }else{
                    return false
                }

            }
           
            // if( draggedElement.dragIn.includes(relatedElement["parent"]) ){
            //     //这里判断下新放入的组件是否在标题之下，因为默认第一个是标题
            //     if(draggedElement.component!=pageSetting.常量.组件.栅格行 && draggedElement.component!=pageSetting.常量.组件.div && e.draggedContext.futureIndex==0){
            //         return false
            //     }
            //     return true
            // }else if(draggedElement.component==pageSetting.常量.组件.栅格行 || draggedElement.component==pageSetting.常量.组件.div){
                
            //     return true
            // }else{
            //     return false
            // }

          
        },
        getPageData(echoData){
            delete echoData['dragIn']
            let components = echoData.components
            for(let i=0;i<components.length;i++){
                delete components[i]['dragIn']
                if(components[i]["type"]==pageSetting.常量.画布组件.标题){
                    components.splice(i, 1)
                    i--
                }else{
                    if(components[i]["components"]){
                        this.getPageData(components[i])
                    }
                }
            }
            return echoData
        },
        deleteComponent(id,component){
            let components = component.components
            for(let i=0;i<components.length;i++){
                if(components[i]["id"]==id){
                    components.splice(i, 1)
                    break
                }else{
                    if(components[i]["components"]){
                        this.deleteComponent(id,components[i])
                    }
                }
            }
        },
        /**
         * 显示组件属性页面
         */
        handlerChoose(item){
            this.currentClickComponent=item
            this.activeKey="2"
        },
        /**
         * 删除组件
         */
        handlerDelete(item){
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除此组件以及所有子组件？",
                onOk: () => {
                    this.deleteComponent(item.id,this.SysPage.echoData)
                    this.activeKey="1"
                    this.currentClickComponent={}
                },
                onCancel () {}
            })
     
            
            
            
        },
       
        changeEventHandler(item){
   
        },
        checkPageProps(){
            let that = this
            that.$refs.pageForm.getForm().validateFields((err, values) => {
                if (!err) {
                    for (const key in values) {
                        that.SysPage[key]=values[key]
                    }
                    that.SysPage["systemNo"] = defaultSettings.systemNo
                    that.isCanSave=true
                    
                }else{
                    that.$message.error("页面属性内容未配置")
                    that.isCanSave=false
                }
            })
        }
        
    },
    
}
</script>
<style scoped src="../../../assets/iconfont/iconfont.css">
   
</style>

<style scoped>
    .centerDiv{
        border: var(--primary-color) 1px solid;height:90vh;width:100%;overflow: auto;
    }
    .componentHeader{font-size:20px; font-weight: bold;}
    .component{text-align: center;width:25%;height:80px;float: left;cursor: pointer;}
    .component span{color:#535353}
    .component:hover{background:#f5f5f5;}
    .component:hover span{color:#000000}

</style>